<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据过滤器</title>
</head>
<body>
    <fieldset>
        <legend>
            数据过滤器
        </legend>
        <p>
            Vue支持在{{  }}插值的尾部添加一小管道符“|”对数据进行过滤，经常用于格式化文本
            比如字母全部大写、货币千位使用逗号分隔等。
            过滤的规则是自定义的，通过给Vue实例添加选项filters来设置

            过滤器也可以串联，而且可以接收参数，例如：
            串联：{{message | filterA | filterB}}
            接收参数：{{message | filterA('arg1','arg2')}}
            这里的字符串agl和arg2将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。
        </p>
        <div id="app1">
            <p>{{ date | formatDate}}</p>
        </div>
    </fieldset>
</body>
</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
        //在月份、日期、小时等小于 10 时前面补 0
        var padDate = function(value){
            return value < 10 ? '0'+ value : value;
        };

        var app1 = new Vue({
            el:"#app1",
            data:{
                date:new Date()//获取当前系统时间
            },
            filters: {//在这里定义过滤器的方法
                formatDate: function (value) { //这里的value就是需要过滤的数据
                    var date = new Date(value);
                    var year = date.getFullYear();
                    var month = padDate(date.getMonth() + 1);
                    var day = padDate(date.getDate());
                    var hours = padDate(date.getHours());
                    var minutes = padDate(date.getMinutes());
                    var seconds = padDate(date.getSeconds());
                    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
                }
            },
            /**
             *
             * 挂载到实例上后调用
             */
            mounted:function () {
                var _this = this;//声明一个变量指向Vue实例this,保证作用域一致
                this.timer = setInterval(function() {
                    _this.date = new Date(); //修改数据date
                },1000);
            },
            beforeDestroy:function () {
                if (this.timer) {
                    clearInterval(this.timer);//在Vue实例销毁前，清除我们的定时器
                }
            }
    });
</script>